<script setup lang="ts">

</script>

<template>
    <div class="app_container">
        <div class="app_container_left">
            <div class="menu_part">
                <div class="menu_part_title">Vue3基础项目</div>
                <div class="menu_part_item">
                    <RouterLink to="/home">Home</RouterLink>
                </div>
                <div class="menu_part_item">
                    <RouterLink to="/about">About</RouterLink>
                </div>
            </div>
            <div class="menu_part">
                <div class="menu_part_title">React子项目</div>
                <div class="menu_part_item">
                    <RouterLink to="/react/reactHome">Go to Home</RouterLink>
                </div>
                <div class="menu_part_item">
                    <RouterLink to="/react/reactAbout">Go to About</RouterLink>
                </div>
            </div>
        </div>
        <div class="app_container_main">
            <!-- router-view渲染当前项目路由 -->
            <RouterView v-show="$route.name"></RouterView>
            <!-- 加载子应用，注意这个id名后面会用到 -->
            <div v-show="!$route.name" id="ContainerSon"></div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.app_container {
    display: flex;
    width: 100vw;
    height: 100vh;
    .app_container_left {
        width: 200px;
        height: 100%;
        background-color: #ccc;
        .menu_part {
            padding: 10px;
            .menu_part_item {
                padding-left: 30px;
            }
        }
    }
    .app_container_main {
        width: calc(100% - 200px);
        height: 100%;
        background-color: #fff;
    }
    #ContainerSon {
        width: 100%;
        height: 100%;
    }
}
</style>
